@line-color: #00ff33;

.wrapper {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .box {
        position: relative;
        top: 10%;
        left: 5%;
        width: 90%;
        height: 80%;
        overflow: hidden;
        padding: 0 10rpx;
    }

    .line {
        height: 100%;
        width: 100%;
        border-bottom: 8rpx solid @line-color;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    }

    .box:after,
    .box:before,
    .angle:after,
    .angle:before {
        content: '';
        display: block;
        position: absolute;
        width: 50rpx;
        height: 50rpx;

        border: 20rpx solid transparent;
        border-radius: 20rpx;;
    }

    .box:after,
    .box:before {
        top: 0;
        border-top-color: @line-color;
    }

    .angle:after,
    .angle:before {
        bottom: 0;
        border-bottom-color: @line-color;
    }

    .box:before,
    .angle:before {
        left: 0;
        border-left-color: @line-color;
    }

    .box:after,
    .angle:after {
        right: 0;
        border-right-color: @line-color;
    }

    @keyframes radar-beam {
        0% {
            transform: translateY(-100%);
        }

        100% {
            transform: translateY(0);
        }
    }
}